<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	  xmlns:th="http://www.thymeleaf.org"
	  xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head>
	<meta charset="utf-8">
	<title>授权客户端管理</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	<link rel="stylesheet" th:href="@{/js/layui-v2.4.5/layui/css/layui.css}" media="all" />
	<link rel="stylesheet" th:href="@{/css/public.css}" media="all" />
</head>

<body class="childrenBody"  style="-webkit-backface-visibility: hidden;">
<form class="layui-form">
	<blockquote class="layui-elem-quote quoteBox">
		<form class="layui-form">
			<div class="layui-inline">
				<label class="layui-form-label" style="text-align: left;width: 72px">客户端名称</label>
				<div class="layui-input-inline">
					<input type="text" class="layui-input searchVal" placeholder="客户端名称"  name = "clientId"/>
				</div>
			</div>

			<a class="layui-btn search_btn"  lay-submit data-type="reload" lay-filter="query">搜索</a>

		</form>
	</blockquote>
	<table id="toolList" lay-filter="toolList"></table>


	<!--操作-->
	<script type="text/html" id="newsListBar">
		{{#  if(d.authorizedGrantTypes!=''&&d.authorizedGrantTypes.indexOf("authorization_code")>-1){ }}
		<a class="layui-btn layui-btn-xs" lay-event="redirectUri">授权码模式白名单管理</a>
		{{#  } }}
	</script>
</form>
<form class="layui-form layui-form-pane" action="" style="display: none" id="editPage">
	<div class="layui-form-item layui-form-text">
		<label class="layui-form-label">授权跳转服务器白名单</label>
		<div class="layui-input-block">
			<textarea placeholder="" class="layui-textarea" id="dirUrlTextArea" style="height: 280px"></textarea>
		</div>
	</div>
</form>
<style>
	.layui-unselect .layui-form-select{}
</style>
<script th:src="@{/js/jquery-2.1.1.min.js}"></script>
<script th:src="@{/js/layui-v2.4.5/layui/layui.js}"></script>
<script th:src="@{/js/utils.js}"></script>
<script type="text/javascript">
    var hasSave = false;
	layui.use(['table','form'], function(){
	var table = layui.table,form = layui.form;

	var mytable = table.render({
		elem: '#toolList'
		,url:path+"/oauthClient/oauthClientList"
		,title: '授权客户端'
        ,where:{"params['clientId']":""}
        ,cols: [ [ //标题栏
            {field: 'clientId', title:'client_id', width:100}
            ,{field: 'clientSecret', title:'client_secret', width:145}
            ,{field: 'scope', title:'scope', width:121}
            ,{field: 'authorizedGrantTypes', title:'授权类型', width:229}
            ,{field: 'webServerRedirectUri', title:'授权服务器白名单', width:209}
            ,{field: 'accessTokenValidity', title:'token有效时间', width:132}
            ,{field: 'additionalInformation', title:'备注', width:208,templet: function(d){
				if(d.additionalInformation!=''){
				    var data = JSON.parse(d.additionalInformation);
				    var remark = data.remark;
				    if(remark!=null||remark!=undefined){
				        return remark;
					}
				}
      		  }}
            ,{field: 'autoapprove', title:'是否跳过授权页面', width:150,templet: function(d){
				if(d.autoapprove!=null&&d.autoapprove!=''){
				    if(d.autoapprove=='true'){
				        return "是";
					}else if(d.autoapprove=='false'){
				        return "否";
					}
				}else{
				    return "";
				}
            }}
            ,{ title:'操作', toolbar: '#newsListBar', width:177}
        ]]
		,page: true
        ,even: true
        ,page: {   //自定义分页条
            limit: 10
            ,curr: 1
            ,theme: '#5FB878'
            ,first: '首页'
            ,last: '尾页'
            ,prev: '<em><i class="layui-icon">&#xe603;</i></em>'
            ,next: '<em><i class="layui-icon">&#xe602;</i></em>'
            ,layout: [ 'prev', 'page', 'next', 'skip']
			,hash:"offset"
        }
        ,done: function(res, curr, count){

        }
        ,request: {
            pageName: 'offset' //页码的参数名称，默认：page
            ,limitName: 'limit' //每页数据量的参数名，默认：limit
        }
		});


        /**
         * 监听查询按钮
         *
         */
        form.on('submit(query)', function(data){
            tableReload(data.field);
        });


        var tableReload = function (data) {
            mytable.reload({
                page: {
                    curr: 1 //重新从第 1 页开始
                }
                ,where:{"params['clientId']":data.clientId}
                , done: function (res, curr, count) {

                }
            })

        }

        //监听操作工具栏
        table.on('tool(toolList)', function(obj){

            var rowData = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）

            var tr = obj.tr; //获得当前行 tr 的DOM对象
            switch (layEvent){
                case 'redirectUri':
                    updateDirUrl(rowData)
                    break;
                default:
                    layer.alert("未知的操作类型",{icon: 5});
            }

        });



        /**
		 * 修改新增
         * @param edit
         * @param id
         */
        var updateDirUrl = function(rowData){
            $("#dirUrlTextArea").val(rowData.webServerRedirectUri);
            layer.open({
                title:""
                ,type: 1,
                content: $("#editPage")//这里content是一个普通的String
                ,btn: ['确定'],
                area: ['600px', '400px']
					,shadeClose:true
                ,yes: function(index, layero){
                    //按钮【按钮一】的回调
                    updateWebServerRedirectUri(rowData.clientId,index);
                }
                ,cancel: function(){
                    //右上角关闭回调

                    //return false 开启该代码可禁止点击该按钮关闭
                }
            });
        }

        var updateWebServerRedirectUri = function (clientId,index) {
            var load = layer.load();
            var webServerRedirectUri=$("#dirUrlTextArea").val();
            if(webServerRedirectUri==""){
                layer.alert("授权服务器白名单不能为空",{icon: 5});
                return ;
			}
            $.ajax({
                type: "POST",
                url:  path+'/oauthClient/updateWebServerRedirectUri',
                dataType:"json",
                data:{"clientId":clientId,"webServerRedirectUri":webServerRedirectUri},
                success: function (data) {
                    layer.close(load);
                    layer.msg(data.msg,{icon: 6});
                    if(data.code>0){
                        var data = {"clientId":$("#clientId").val()}
                        tableReload(data);
                    }
                    layer.close(index);

                },
                error: function (msg) {
                    layer.close(load);
                    layer.msg("更新失败",{icon: 5})

                }
            });
        }


	});
</script>
</body>
</html>